<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="icon" type="image/svg" href="/static/Anchor/assets/img/station.svg"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>获取&登录笔记本</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>
    
<!-- Google Font -->
<!--<link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,800" rel="stylesheet">-->
    
<!-- Font Awesome Icons -->
<!--<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">-->
    
<!-- Main CSS -->
<link href="/static/Anchor/assets/css/main.css" rel="stylesheet"/>
<!-- Animation CSS -->
<link href="/static/Anchor/assets/css/vendor/aos.css" rel="stylesheet"/>
    
</head>
    
<body> 
    
    
<!--------------------------------------
NAVBAR
--------------------------------------->
<nav class="topnav navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<div class="container-fluid">
	<a class="navbar-brand d-sm-block d-md-none" href="./index.html"><i class="fas fa-anchor mr-2"></i><strong>Anchor UI</strong> Kit</a>
	<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="navbar-collapse collapse" id="navbarColor02" style="">
		<ul class="navbar-nav mr-auto d-flex align-items-center">
			<li class="nav-item">
				<a class="nav-link" href="/index">首页</a>
			</li>
			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					业余无线电模拟考试 </a>
				<div class="dropdown-menu" aria-labelledby="navbarDropdown">
					<a class="dropdown-item" href="/study/A30">A类学习</a>
					<a class="dropdown-item" href="/study/B50">B类学习</a>
					<a class="dropdown-item" href="/study/C80">C类学习</a>
					<a class="dropdown-item" href="/test10">A类随机复习</a>
					<a class="dropdown-item" href="/test10b">B类随机复习</a>
				</div>
			</li>

			<li class="nav-item">
				<a class="nav-link" href="./test10">A类随机复习</a>
			</li>
		</ul>
	</div>
</div>
</nav>
<!-- End Navbar -->
    
<!-- Main -->
<div class="d-md-flex h-md-100 align-items-center">
	<div class="col-md-6 p-0 bg-indigo h-md-100">
		<div class="text-white d-md-flex align-items-center h-100 p-5 text-center justify-content-center">
			<div class="logoarea pt-5 pb-5">
				<p>
					<i class="fa fa-anchor fa-3x"></i>
				</p>
				<h1 id="loginTips" class="mb-0 mt-3 display-4">下滑登录</h1>
				<h5 class="mb-4 font-weight-light"> 获取记题本 <i class="fab fa-sass fa-2x text-cyan"></i></h5>
				<button type="button"  class="btn btn-outline-white btn-lg btn-round" data-toggle="modal" data-target="#myModal" >
					注册记题本
				</button>

<!--				<a class="btn btn-outline-white btn-lg btn-round" href="#" data-toggle="modal" data-target="#modal_newsletter">Download-->
<!--&lt;!&ndash;					<a href="https://github.com/wowthemesnet/Anchor-Bootstrap-UI-Kit/archive/master.zip" class="downloadzip" class="hidden"></a>&ndash;&gt;-->
<!--				</a>-->
			</div>
		</div>
	</div>
	<div class="col-md-6 p-0 bg-white h-md-100 loginarea">
		<div class="d-md-flex align-items-center h-md-100 p-5 justify-content-center">
			<form class="border rounded p-5">
				<h3 class="mb-4 text-center">登录窗口</h3>
				<div class="form-group">
					<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="E-mail" required="">
				</div>
				<div class="form-group">
					<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required="">
				</div>
				<div class="form-group form-check">
					<input type="checkbox" class="form-check-input" id="exampleCheck1">
					<label class="form-check-label small text-muted" for="exampleCheck1">记住我</label>
				</div>
				<button onclick="login()" class="btn btn-success btn-round btn-block shadow-sm">登录</button>
				<small class="d-block mt-4 text-center"><a class="text-gray" href="#">忘记记题本密码</a></small>
			</form>
		</div>
	</div>
</div>
<!-- End Main -->
    
    
<!------------------------------------------
DEMO MODAL & DONATE BUTTON ONLY - DON'T COPY
------------------------------------------->
<!-- 模态 -->
<div class="modal" id="myModal" style="    z-index: 1112;">
	<div class="modal-dialog">
		<div class="modal-content">

			<!-- 模态标题 -->
			<div class="modal-header">
				<h4 class="modal-title">记题本注册对话框</h4>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>

			<!-- 模态主体 -->
			<div class="modal-body">
				<div class="form-group">
					<input type="email" class="form-control" id="Email1" aria-describedby="emailHelp" placeholder="E-mail" required="">
					<span id="info1" style="margin-top: 6px;margin-left: 12px;" >请输入邮箱</span>
				</div>
				<div class="form-group">
					<input type="password" class="form-control" id="Password1" placeholder="密码" required="">
				</div>
				<div class="form-group">
					<input type="password" class="form-control" id="Password2" placeholder="再输密码" required="">
					<span id="info2" style="margin-top: 6px;margin-left: 12px;" >请输入密码</span>
				</div>

				<div class="form-group">
					<input  type="text" pattern="[0-9:]*" style="width: 60% ;display:inline;"  class="form-control" id="Ecode" placeholder="验证码" required="">
					<button type="button" class="btn" style="margin-bottom: 4px;">获取验证码</button>

				</div>
			</div>
			<button type="button" class="btn btn-success" data-dismiss="modal">注册</button>
<!--			&lt;!&ndash; 模态页脚 &ndash;&gt;-->
<!--			<div class="modal-footer">-->

<!--				<button type="button" class="btn btn-info" data-dismiss="modal">再看看题</button>-->
<!--			</div>-->

		</div>
	</div>
</div>
   
<!--------------------------------------
JAVASCRIPTS
--------------------------------------->
<script src="/static/Anchor/assets/js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="/static/Anchor/assets/js/vendor/popper.min.js" type="text/javascript"></script>
<script src="/static/Anchor/assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
<script src="/static/Anchor/assets/js/functions.js" type="text/javascript"></script>


<!-- Animation -->
<script src="/static/Anchor/assets/js/vendor/aos.js" type="text/javascript"></script>
<noscript>
    <style>
        *[data-aos] {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
    </style>
</noscript>
<script>
    AOS.init({
        duration: 700
    });
</script>
 
<!-- Disable animation on less than 1200px, change value if you like -->
<script>
AOS.init({
  disable: function () {
    var maxWidth = 1200;
    return window.innerWidth < maxWidth;
  }
});
</script>

<script>

	// 前台传值方法
	function login() {
		$.ajax({
			type: "post", // 以post方式发起请求
			url: "/login", // 你的请求链接
			data: { // 提交数据
				"username": "admin", // 前者为字段名，后者为数据
				"password": "123"
			},
			success(data) {
				// data为返回值
				// 成功后的回调方法
				console.log(data)
			}
		})
	}

	window.addEventListener('resize',  function(e){
		if (screen.width < 768){

			document.getElementById("loginTips").innerText="下滑登录"
		}else {
			document.getElementById("loginTips").innerText="右侧登录"
		}

	});


	let info1 = document.getElementById("info1");
	let info2 = document.getElementById("info2");
	let Email1 = document.getElementById("Email1");
	let Password1 = document.getElementById("Password1");

	let Password2 = document.getElementById("Password2");
	let Ecode = document.getElementById("Ecode");

	//用户名正则，6到16位（字母，数字）
	var uPattern = /^[a-zA-Z0-9]{6,16}$/;

	$('#Email1').on('blur', function(e) {
		var email = this.value;
		//邮箱正则式
		var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;

		if (email===""){
			info1.innerText='邮箱不能为空'
		}else{
			if(reg.test(email)){
				info1.innerText='符合邮箱格式'
			}else{
				info1.innerText='不符合邮箱格式'
			}
		}




	})

	$('#Password1').on('blur', function(e) {
		var password1 = this.value;
		if(password1==""){
			info2.innerText='密码不能为空'
		}else{
			if (Password2.value==""){
				info2.innerText='请再次输入密码'
			}else {
				if (Password2.value==password1){

					if(uPattern.test(password1)){
						info2.innerText='符合要求'
					}else{
						info2.innerText='密码必须为6到16位（字母，数字）'
					}
				}else{
					info2.innerText='两次密码不一致'
				}

			}

		}

	})

	$('#Password2').on('blur', function(e) {
		var password2 = this.value;
		if(Password1.value ==""){
			info2.innerText='输入密码不能为空'
		}else if (password2==""){
			info2.innerText='再次输入密码不能为空'
		}else{
			if (Password1.value==password2){
				if(uPattern.test(password2)){
					info2.innerText='符合要求'
				}else{
					info2.innerText='密码必须为6到16位（字母或数字）'
				}

			}else{
				info2.innerText='两次密码不一致'
			}
		}

	})
	$('#Ecode').on('blur', function(e) {
		console.log('失去焦点触发');
	})

</script>

</body>
</html>